<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>录入自定义页面</title>
		<!-- 引入 css -->
		<link href="/admin/plugin/wangEditor/style.css" rel="stylesheet">
		<!-- 引入 js -->
		<script src="/admin/plugin/wangEditor/index.js"></script>

		<!--引入 element-ui 的样式，-->
		<link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
		<!-- 必须先引入vue，  后使用element-ui -->
		<script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
		<!-- 引入element 的组件库-->
		<script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>
		<link rel="stylesheet" href="/admin/js-css/css/backColor.css" media="all">

		<script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

		<!--    引入Layui组件-->
		<link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css"
			tppabs="http://res.layui.com/layui/dist/css/layui.css" media="all">
		<script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

		<script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>
		<style type="text/css">
			.layui-table-click {
				background-color: cadetblue !important;
				color: white;
			}

			::-webkit-scrollbar {
				width: 6px;
				height: 10px;
				background-color: rgba(255, 255, 255, 0.1);
			}

			::-webkit-scrollbar-thumb {
				background: rgba(144, 147, 153, .3);
				border-radius: 4px;
				cursor: pointer;
			}

			.layui-form-label {
				float: left;
				display: block;
				padding: 7px 1px;
				width: 100px;
				font-weight: 400;
				line-height: 14px;
				text-align: right;
			}

			/**输入框高度设置**/
			.layui-input,
			.layui-select,
			.layui-textarea {
				height: 30px;
				line-height: 30px\9;
			}

			/**按钮样式设置**/
			.layui-btn {
				height: 30px;
				line-height: 30px;
				font-size: 13px;
			}

			.layui-btn+.layui-btn {
				margin-left: 0px;
			}

			.layui-table,
			.layui-table-view {
				margin: 0px 0;
			}

			.tablebox {
				margin: 0 auto;
				width: 80%;
				text-align: center;
			}

			.tablebox th {
				height: 30px;
				padding: 5px 10px;
			}
			
			.tablebox td {
				height: 30px;
				text-align: left;
				padding: 5px 30px;
			}
			
			.tablebox td ul li{
				list-style: disc;
				padding: 2px 0;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="demoTable" style="padding: 5px;">
				<!-- 进行结账 -->
				<table id="tablebox_table">
					<table border='1' class='tablebox'>
						<tr>
							<th>
								<el-form size="small"  :inline="true"  >
									<el-form-item label="截至时间："  >
										<el-date-picker
												v-model="jzsj"
												value-format="yyyy-MM-dd"
												type="date"
												placeholder="选择日期时间">
										</el-date-picker>
									</el-form-item>

									<el-form-item>
										<el-button type="primary" @click="jiezhang" >开始结帐</el-button>
									</el-form-item>

								</el-form>
							</th>
						</tr>
						<tr>
							<th>结帐的目的</th>
						</tr>
						<tr>
							<td>
								<ul>
									<li>保证历史数据的完整和正确，避免人为错误；</li>
								</ul>
							</td>
						</tr>
						<tr>
							<th>结帐核算过程</th>
						</tr>
						<tr>
							<td>
								<ul>
									<li>检查本次水电总表及分表度数是否输入正确且没有住户被遗漏；</li>
									<li>检查本次每户费用核算是否没有遗漏；</li>
									<li>检查本次住户交款是否已全部交付；</li>
									<li>确认步骤1-3后即可做结帐；</li>
								</ul>
							</td>
						</tr>
						<tr>
							<th>结帐的影响</th>
						</tr>
						<tr>
							<td>
								<ul>
									<li>做了结帐后，不能再更改已做结帐的数据；</li>
								</ul>
							</td>
						</tr>
					</table>
				</table>
			</div>
		</div>


		<script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					years:[],
					methods:[],
					days:[],
					jzsj:"",
					formData:{"t_year":"","t_method":"","day":""},
					searchParmsData:{}
				},
				created(){
					this.searchParmsData = getParams();
					this.getData();
				},
				methods: {
					async jiezhang(){
						this.$confirm('确定要开始结帐吗?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(async () => {
							let i = load();
							const res = await postWebCustom(getTableId("730"),{type:this.searchParmsData.type,id:this.searchParmsData.id,ny:this.jzsj,jzlx:"1"});
							layer.close(i);
							top.alert(res.msg);
						}).catch(() => {
							this.$message({
								type: 'info',
								message: '已取消删除'
							});
						});

					},
					async getData(){
						const res = await postWebCustom(getTableId("684"),{});
						this.years = res.data.years;
						this.methods = res.data.methods;
						this.formData["t_year"] = res.data.t_year;
						this.formData["t_method"] = res.data.t_method;
					}
				},
				watch:{
					"formData.t_method": async function (v1,v2){
						if(this.formData.t_year == ""){
							return;
						}
						const res = await postWebCustom(getTableId("852"),{year:""+this.formData.t_year,method:""+v1});
						this.days = res.data;
					},
					"formData.t_year":async function (v1,v2){
						if(this.formData.t_method == ""){
							return;
						}
						const res = await postWebCustom(getTableId("852"),{year:""+v1,method:""+this.formData.t_method});
						this.days = res.data;
					}
				}

			})
		</script>
	</body>
</html>
